<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<link rel="stylesheet" href="css/bootstrap.min.css"/>
	<link rel="stylesheet" href="css/controls.css"/>
	<script type="text/javascript" src="libs/angular/angular.min.js"></script>

	<!-- build:js({.tmp,app}) scripts/controls.js -->
	<script type="text/javascript" src="scripts/controls/package.js"></script>

	<script type="text/javascript" src="scripts/services/uihelper.js"></script>
	<script type="text/javascript" src="scripts/services/dialog.js"></script>
	<script type="text/javascript" src="scripts/services/alert.js"></script>
	<script type="text/javascript" src="scripts/services/hint.js"></script>
	<script type="text/javascript" src="scripts/services/preview.js"></script>

	<script type="text/javascript" src="scripts/controls/dropdown.js"></script>
	<script type="text/javascript" src="scripts/controls/contextmenu.js"></script>
	<script type="text/javascript" src="scripts/controls/tooltip.js"></script>
	<script type="text/javascript" src="scripts/controls/pager.js"></script>
	<script type="text/javascript" src="scripts/controls/tree.js"></script>
	<script type="text/javascript" src="scripts/controls/calendar.js"></script>
	<script type="text/javascript" src="scripts/controls/timepicker.js"></script>
	<script type="text/javascript" src="scripts/controls/datetimepicker.js"></script>
	<script type="text/javascript" src="scripts/controls/stepper.js"></script>
	<script type="text/javascript" src="scripts/controls/scrollbar.js"></script>
	<script type="text/javascript" src="scripts/controls/list.js"></script>
	<script type="text/javascript" src="scripts/controls/datagrid.js"></script>
	<!-- endbuild -->

	<script type="text/javascript" src="scripts/demo/package.js"></script>
	<script type="text/javascript" src="scripts/demo/dialog.js"></script>
	<script type="text/javascript" src="scripts/demo/alert.js"></script>
	<script type="text/javascript" src="scripts/demo/hint.js"></script>
	<script type="text/javascript" src="scripts/demo/preview.js"></script>
	<script type="text/javascript" src="scripts/demo/calendar.js"></script>
	<script type="text/javascript" src="scripts/demo/date.js"></script>
	<script type="text/javascript" src="scripts/demo/contentmenu.js"></script>
	<script type="text/javascript" src="scripts/demo/scrollbar.js"></script>
	<script type="text/javascript" src="scripts/demo/pager.js"></script>
	<script type="text/javascript" src="scripts/demo/stepper.js"></script>
	<script type="text/javascript" src="scripts/demo/list.js"></script>
	<script type="text/javascript" src="scripts/demo/tree.js"></script>

	<script type="text/javascript" src="scripts/main.js"></script>
</head>
<body ng-app="sn">
<div class="col-md-4">
    <div class="panel panel-default">
        <div class="panel-heading">下拉菜单</div>
        <div class="panel-body">
            <div class="dropdown" sn-dropdown>
                <button class="btn btn-default dropdown-toggle" type="button">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">aaa</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">bbb action</a></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">ccc else here</a></li>
                    <li role="presentation" class="divider"></li>
                    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">ddd</a></li>
                </ul>
            </div>
        </div>
    </div>

	<div ng-controller="TestHintCtrl" class="panel panel-default">
		<div class="panel-heading">Tooltip</div>
		<div class="panel-body">
			<div class="col-md-12">
				<i class="glyphicon glyphicon-question-sign" sn-tooltip="测试这里写很多很多提示，你好，我是一个提示，啦啦啦啦"></i>
			</div>
		</div>
	</div>

	<div ng-controller="TestHintCtrl" class="panel panel-default">
		<div class="panel-heading">操作提示</div>
		<div class="panel-body">
			<input type="text" class="form-control" ng-model="operation"/>
			<button class="btn btn-default" ng-click="hint()">hint</button>
		</div>
	</div>

	<div ng-controller="TestPreviewCtrl" class="panel panel-default">
		<div class="panel-heading">图片预览</div>
		<div class="panel-body">
			<button class="btn btn-default" ng-click="preview()">preview</button>
			<button class="btn btn-default" ng-click="changeImg()">change image</button>
		</div>
	</div>

	<div ng-controller="TestAlertCtrl" class="panel panel-default">
		<div class="panel-heading">确定框</div>
		<div class="panel-body">
			<button class="btn btn-default" ng-click="myAlert()">alert</button>
			<button class="btn btn-default" ng-click="myConfirm()">confirm</button>
		</div>
	</div>

	<div ng-controller="TestDialogCtrl" class="panel panel-default">
		<div class="panel-heading">对话框</div>
		<div class="panel-body">
			<div>{{result}}</div>
			<button class="btn btn-default" ng-click="dialog()">dialog</button>
		</div>
	</div>

	<div ng-controller="TestListCtrl" class="panel panel-default">
		<div class="panel-heading">列表</div>
		<div class="panel-body">
			<sn-list></sn-list>
		</div>
	</div>

	<div ng-controller="TestCalendarCtrl" class="panel panel-default">
		<div class="panel-heading">日历</div>
		<div class="panel-body">
			<sn-calendar init-year="initYear" init-month="initMonth" init-date="initDate"></sn-calendar>
		</div>
	</div>

	<div ng-controller="TestDateCtrl" class="panel panel-default">
		<div class="panel-heading">日期控件</div>
		<div class="panel-body">
			<form role="form">
				<div class="form-group">
					<button class="btn btn-default" ng-click="getDate()">取值</button>
				</div>
				<div class="form-group">
					<label>日期</label>
					<sn-datetimepicker ng-model="date1" placeholder="请选择开始时间"></sn-datetimepicker>
				</div>
				<div class="form-group">
					<label>日期</label>
					<sn-datetimepicker ng-model="date2"></sn-datetimepicker>
				</div>
			</form>
		</div>
	</div>
</div>

<div class="col-md-8">
	<div ng-controller="TestStepperCtrl" class="panel panel-default">
		<div class="panel-heading">步进控件</div>
		<div class="panel-body">
			<div class="col-md-12">
				<sn-stepper class="col-md-6" maxStep="{{maxStep}}" currentStep="{{initStep}}"></sn-stepper>
				currentStep: {{currentStep}}
			</div>

			<button class="btn btn-default" ng-click="maxStep=5">改变maxStep</button>
		</div>
	</div>
</div>

<div class="col-md-8">
	<div class="panel panel-default" ng-controller="TestContextMenuCtrl">
		<div class="panel-heading">右键菜单</div>
		<div class="panel-body">
			<table class="table table-bordered table-hover">
				<thead>
				<tr>
					<th>Name</th>
					<th>Age</th>
					<th>Gender</th>
				</tr>
				</thead>
				<tbody>
				<tr ng-repeat="student in students" sn-contextmenu="itemMenu(student)">
					<td>{{student.name}}</td>
					<td>{{student.age}}</td>
					<td>{{student.gender}}</td>
				</tr>
				</tbody>
			</table>
		</div>
	</div>

	<div class="panel panel-default" ng-controller="TestScrollCtrl">
		<div class="panel-heading">滚动条</div>
		<div class="panel-body">
			<style>
				#scrollbar {margin: 20px 0 10px; }
				#scrollbar .viewport { height: 200px; overflow: hidden; position: relative; }
				#scrollbar .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }

			</style>

			<div id="scrollbar">
				<sn-scrollbar></sn-scrollbar>
				<div class="viewport">
					<div class="overview" ng-style="{top:-position+'px'}">
						<h3>Magnis dis parturient montes</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.</p>

						<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>

						<p>Vivamus sed tellus quis orci dignissim scelerisque nec vitae est. Duis et elit ipsum. Aliquam pharetra auctor felis tempus tempor. Vivamus turpis dui, sollicitudin eget rhoncus in, luctus vel felis. Curabitur ultricies dictum justo at luctus. Nullam et quam et massa eleifend sollicitudin. Nulla mauris purus, sagittis id egestas eu, pellentesque et mi. Donec bibendum cursus nisi eget consequat. Nunc sit amet commodo metus. Integer consectetur lacus ac libero adipiscing ut tristique est viverra. Maecenas quam nibh, molestie nec pretium interdum, porta vitae magna. Maecenas at ligula eget neque imperdiet faucibus malesuada sed ipsum. Nulla auctor ligula sed nisl adipiscing vulputate. Curabitur ut ligula sed velit pharetra fringilla. Cras eu luctus est. Aliquam ac urna dui, eu rhoncus nibh. Nam id leo nisi, vel viverra nunc. Duis egestas pellentesque lectus, a placerat dolor egestas in. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vitae ipsum non est iaculis suscipit.</p>

						<h3>Adipiscing risus </h3>
						<p>Quisque vel felis ligula. Cras viverra sapien auctor ante porta a tincidunt quam pulvinar. Nunc facilisis, enim id volutpat sodales, leo ipsum accumsan diam, eu adipiscing risus nisi eu quam. Ut in tortor vitae elit condimentum posuere vel et erat. Duis at fringilla dolor. Vivamus sem tellus, porttitor non imperdiet et, rutrum id nisl. Nunc semper facilisis porta. Curabitur ornare metus nec sapien molestie in mattis lorem ullamcorper. Ut congue, purus ac suscipit suscipit, magna diam sodales metus, tincidunt imperdiet diam odio non diam. Ut mollis lobortis vulputate. Nam tortor tortor, dictum sit amet porttitor sit amet, faucibus eu sem. Curabitur aliquam nisl sed est semper a fringilla velit porta. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum in sapien id nulla volutpat sodales ac bibendum magna. Cras sollicitudin, massa at sodales sodales, lacus tortor vestibulum massa, eu consequat dui nulla et ipsum.</p>

						<p>Aliquam accumsan aliquam urna, id vulputate ante posuere eu. Nullam pretium convallis tincidunt. Duis vitae odio arcu, ut fringilla enim. Nam ante eros, vestibulum sit amet rhoncus et, vehicula quis tellus. Curabitur sed iaculis odio. Praesent vitae ligula id tortor ornare luctus. Integer placerat urna non ligula sollicitudin vestibulum. Nunc vestibulum auctor massa, at varius nibh scelerisque eget. Aliquam convallis, nunc non laoreet mollis, neque est mattis nisl, nec accumsan velit nunc ut arcu. Donec quis est mauris, eu auctor nulla. Fusce leo diam, tempus a varius sit amet, auctor ac metus. Nam turpis nulla, fermentum in rhoncus et, auctor id sem. Aliquam id libero eu neque elementum lobortis nec et odio.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="panel panel-default">
		<div class="panel-heading">数据表格</div>
		<div class="panel-body">
			<sn-datagrid></sn-datagrid>
		</div>
	</div>

	<div ng-controller="TestTreeCtrl" class="panel panel-default">
		<div class="panel-heading">树控件</div>
		<div class="panel-body">
			<div class="panel panel-info">
				<div class="panel-heading">区域树</div>
				<div class="panel-body">
					<sn-tree tree-id="areaTree" tree-data="areaData"></sn-tree>
					<button class="btn btn-default" ng-click="addNode()">add node</button>
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading">组织</div>
				<div class="panel-body">
					<sn-tree tree-id="armyTree" tree-data="armyData"></sn-tree>
				</div>
			</div>
			<div class="panel panel-info">
				<div class="panel-heading">大树</div>
				<div class="panel-body" style="height:300px; overflow-y: scroll">
					<sn-tree tree-id="bigTree" tree-data="bigTreeData"></sn-tree>
				</div>
			</div>
		</div>
	</div>

	<div ng-controller="TestPagerCtrl" class="panel panel-default">
		<div class="panel-heading">分页控件</div>
		<div class="panel-body">
			<sn-pager itemsPerPage="15" totalItems="{{totalItems1}}" listSize="10"></sn-pager>
			<button class="btn btn-default" ng-click="changeTotal()">change total</button>
			<sn-pager itemsPerPage="8" totalItems="{{totalItems2}}"></sn-pager>
		</div>
	</div>
</div>
</body>
</html>